<template>
  <div class="orderItem-box">
    <div class="orderItem-container circle-bg">
      <!-- 订单信息 -->
      <van-cell class="order-info" :border="false" @click="$router.push({path: '/orderDetail', query: {id: detail.id}})">
        <div slot="title" class="order-num">订单编号：{{detail.orderSn}}</div>
        <div slot="extra" class="order-status">{{detail.showStatus}}</div>
      </van-cell>
      <!-- 商品信息 -->
      <div class="order-goods-list" @click="$router.push({path: '/orderDetail', query: {id: detail.id, itemLength: detail.orderItemList.length}})">
        <div class="order-goods-item" v-for="(orderGoods, index) in detail.orderItemList" :key="index">
          <van-image :src="orderGoods.goodsPic" />
          <div class="goods">
            <span class="title van-multi-ellipsis--l2">{{orderGoods.goodsName}}</span>
            <span class="num">x{{orderGoods.goodsNum}}</span>
            <span class="price">¥{{orderGoods.goodsPrice | fentoyuan}}</span>
          </div>
        </div>
      </div>
      <!-- 金额信息 -->
      <div class="order-price">
        <span class="discount"><span class="title">优惠</span><span class="money">¥{{detail.orderDiscountMoney | fentoyuan}},</span></span>
        <span class="freight"><span class="title">运费</span><span class="money">¥{{detail.orderFreightMoney | fentoyuan}},</span></span>
        <span class="pay"><span class="title">需付款</span><span class="money">¥{{detail.orderPayMoney | fentoyuan}}</span></span>
      </div>
      <!-- 操作按钮 -->
      <div class="order-btn">
        <van-button v-if="detail.status == '0'" @click="$router.push({path: '/orderPay', query: {id: detail.id}})">支付</van-button>
        <van-button v-if="detail.status == '2'" @click="orderReceive">确认收货</van-button>
        <van-button v-if="detail.status == '20'">删除</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import constants from '@/config/constants'
import orderApi from '@/api/orderApi'

export default {
  name: 'orderDetail',
  props: ['detail'],
  data () {
    return {

    }
  },
  methods: {
		/* 确认收货 */
		async orderReceive () {
			this.$dialog.confirm({
			  title: '',
			  message: '确认收货?'
			})
			.then(async () => {
				const result = await orderApi.orderReceive({orderId: this.detail.id});
				if(result.code == constants.SUCCESS){
					this.$router.go(0);
					this.$emit("resetOrderList");
				}
			})
			.catch(() => {});
		}
  }
}
</script>

<style lang="scss">
.orderItem-container{
  background-color: #fff;
  .order-info{
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #f2f2f2;
    .order-num{
      color: #333;
      font-size: 13px;
    }
    .order-status{
      color: #a8700d;
      font-size: 13px;
    }
  }
  .order-price{
    border-top: 1px solid #f2f2f2;
    display: flex;
    justify-content: flex-end;
    .discount,.freight,.pay{
      margin-right: 10px;
      .title,.money{
        font-size: 13px;
        color: #999;
      }
      .title{
        margin-right: 5px;
      }
    }
    .pay{
      .money{
        color: #e1212b;
      }
    }
  }
  .order-btn{
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px;
    .van-button{
      height: 30px;
      margin-left: 10px;
      span{
        font-size: 13px;
      }
    }
  }
}
</style>
